import React, { Component, PureComponent } from 'react'
import { View, Text, ImageBackground, StatusBar, ListView, TouchableOpacity } from 'react-native'
import PropTypes from 'prop-types'
import { WingBlank, Carousel, WhiteSpace } from 'antd-mobile'
import { connect } from 'react-redux'
import ScrollableTabView, {DefaultTabBar,} from 'react-native-scrollable-tab-view'
import { createAction, NavigationActions } from '../../utils'
import CustomTabBar from './widgets/CustomTabBar'
import color from '../../utils/color'
import screen from '../../utils/screen'
import { Container, Echarts } from '../../widgets/echarts/components'
import RefreshListView from "../../widgets/RefreshListView";

const buttons = ['每日资讯', '定制资讯']

@connect(({ news, loading }) => ({ ...news, isLoading: loading.models.news}))
export default class extends Component {
  static navigationOptions = {
    title: '',
    headerStyle: {
      backgroundColor: color.theme,
      elevation: 0,
      shadowOpacity: 0,
    },
    header: null,
    headerTitleStyle: {
      color: 'white',
      fontSize: screen.pxToDp(30),
      marginLeft: screen.pxToDp(26),
    },
  }

  state = {
    idx: 0,
    data: ['1', '2', '3'],
  }

  componentDidMount() {
    this.props.dispatch(createAction("news/init")({
      callback: () => {
        this.listView && this.listView.startFooterRefreshing()
        this.twoListView && this.twoListView.startFooterRefreshing()
      }
    }))
  }

  renderHeader = () => {
    return (
      <View>
        <View style={{backgroundColor: 'white'}}>
          <View style={{padding: screen.pxToDp(16)}}>
            <Carousel
              autoplay={true}
              autoplayInterval={5000}
              infinite
              selectedIndex={1}
            >
              {this.state.data.map(val => (
                <View key={val} style={{height: screen.pxToDp(300)}}>
                  <ImageBackground style={{height: screen.pxToDp(300), justifyContent: 'flex-end'}} source={{uri: `https://zos.alipayobjects.com/rmsportal/TekJlZRVCjLFexlOCuWn.png`}}>
                    <View style={{flexDirection: 'row'}}>
                      <View style={{height: screen.pxToDp(100), width: screen.pxToDp(100), backgroundColor: '#880000',justifyContent: 'center', alignItems: 'center'}}>
                        <Text style={{color: 'white', fontSize: screen.pxToDp(28)}}>热门</Text>
                        <Text style={{color: 'white', fontSize: screen.pxToDp(28)}}>资讯</Text>
                      </View>
                      <View style={{height: screen.pxToDp(100), flex: 1,backgroundColor: '#000000', justifyContent: 'center', alignItems: 'center'}}>
                        <View style={{paddingLeft: screen.pxToDp(20), paddingRight: screen.pxToDp(20)}}>
                          <Text style={{color: 'white', fontSize: screen.pxToDp(30)}}>一个跨越三个时代的创业者，与万亿物流行业的新未来</Text>
                        </View>
                      </View>
                    </View>
                  </ImageBackground>
                </View>
              ))}
            </Carousel>
          </View>
        </View>
        <WhiteSpace />
        <View style={{height: screen.pxToDp(80), justifyContent: 'center', backgroundColor: 'white', borderBottomWidth: 1, borderBottomColor: '#b5b5b5'}}>
          <View style={{paddingHorizontal: screen.pxToDp(20)}}>
            <Text style={{color: '#7b7b7b'}}>资讯盒子</Text>
          </View>
        </View>
      </View>
    )
  }

  requestData = (view) => {
    this.props.dispatch(createAction("news/fetchNewsList")({
      listView: view
    }))
  }

  requestTwoData = (view) => {
    this.props.dispatch(createAction("news/fetchTwoNewsList")({
      listView: view
    }))
  }

  renderCell = (d) => {
    const title = d['title'] || ""
    const author = d['author'] || ""
    const createTime = d['createTime'] || ""
    return (
      <TouchableOpacity activeOpacity ={0.8} onPress={() => {
        this.props.navigation.navigate('NewsStack', d)
      }}>
        <View style={{ backgroundColor: 'white', height: screen.pxToDp(150), justifyContent: 'center', paddingHorizontal: screen.pxToDp(20)}}>
          <View style={{flex: 1, borderBottomColor: '#b5b5b5', borderBottomWidth: 1, justifyContent: 'center', }}>
            <View style={{paddingVertical: screen.pxToDp(20)}}>
              <Text style={{color: '#7b7b7b'}}>{title}</Text>
            </View>
            <View style={{flexDirection: 'row'}}>
              <Text style={{fontSize: screen.pxToDp(22), color: '#7b7b7b'}}>{author}</Text>
              <View style={{width: screen.pxToDp(200)}}></View>
              <Text style={{fontSize: screen.pxToDp(22), color: '#7b7b7b'}}>{createTime}</Text>
            </View>
          </View>
        </View>
      </TouchableOpacity>
    )
  }

  render() {
    const { idx } = this.state
    const { dataSource,twoDataSource,twoCurrentPage, currentPage } = this.props;
    return (
      <View style={{flex: 1}}>
        <StatusBar backgroundColor={color.theme} />
        <ScrollableTabView
          tabBarBackgroundColor={color.theme}
          tabBarActiveTextColor="#00195e"
          tabBarInactiveTextColor="#268db8"
          tabBarTextStyle={{
            fontSize: screen.pxToDp(30),
            fontWeight: 'normal',
          }}
          renderTabBar={() => <CustomTabBar />}
        >
          <View tabLabel="每日资讯">
            <LeftComponent renderHeader={this.renderHeader} renderCell={this.renderCell} {...this.props} />
          </View>
          <View tabLabel="定制资讯">
            <RightComponent renderHeader={this.renderHeader} renderCell={this.renderCell} {...this.props} />
          </View>
        </ScrollableTabView>
      </View>
    );
  }
}

class LeftComponent extends PureComponent {
  static propTypes = {
    renderHeader: PropTypes.func,
    renderCell: PropTypes.func,
  }
  constructor(props) {
    super(props)
  }

  listView:RefreshListView =  null

  componentDidMount() {
    this.listView && this.listView.startFooterRefreshing()
  }

  requestData = () => {
    this.props.dispatch(createAction("news/fetchNewsList")({
      listView: this.listView
    }))
  }

  render() {
    const { dataSource, renderHeader,renderCell } = this.props;
    return (
        <RefreshListView
          ref={(e) => this.listView = e}
          dataSource={dataSource}
          renderHeader={renderHeader}
          renderRow={(rowData) => {
            return (
              renderCell(rowData)
            )
          }}
          onHeaderRefresh={() => {}}
          onFooterRefresh={this.requestData}
        />
    )
  }
}


class RightComponent extends PureComponent {
  static propTypes = {
    renderHeader: PropTypes.func,
    renderCell: PropTypes.func,
  }
  constructor(props) {
    super(props)
  }

  listView:RefreshListView =  null

  componentDidMount() {
    this.listView && this.listView.startFooterRefreshing()
  }

  requestTwoData = () => {
    this.props.dispatch(createAction("news/fetchTwoNewsList")({
      listView: this.listView
    }))
  }

  render() {
    const { twoDataSource,renderHeader,renderCell } = this.props;
    return (
      <RefreshListView
        ref={(e) => this.listView = e}
        dataSource={twoDataSource}
        renderHeader={renderHeader}
        renderRow={(rowData) => {
          return (
            renderCell(rowData)
          )
        }}
        onHeaderRefresh={() => {}}
        onFooterRefresh={this.requestTwoData}
      />
    )
  }
}
